<template>
    <el-drawer v-model="drawer" size="800">
        <template #header>
            <h4>设置轮播图</h4>
        </template>
        <template #default>
            <selectImage
            :limit="5"
            :props_imageArr="imageArr"
            @imageItemHandler="imageItemHandler"
            @removeImageHandler="removeImageHandler"></selectImage>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="$emit('submitSetBannerHandler')">提交</el-button>
                <el-button type="default" >取消</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup lang='ts'>
import selectImage from '@/components/selectImage.vue'
import { ref , reactive , onMounted } from 'vue' 

const drawer = ref(false)
const imageArr = ref([]) as any
const openBannerDrawer = () => drawer.value = true

const imageItemHandler = (e:[]) => {
    imageArr.value = e
    emit('getBannerList',imageArr.value)
}

const emit = defineEmits(['submitSetBannerHandler','getBannerList'])

const removeImageHandler = (e:any) => {
    imageArr.value = imageArr.value.filter((item:any) => {
        return item !== e
    })
    emit('getBannerList',imageArr.value)
}
defineExpose({
    openBannerDrawer
})

</script>
<style scoped lang='scss'>

</style>